function createLeadChartPanel(){
	
	var columnChartTab = {
    		xtype	: 'panel',
 	    	id		: 'columnChartTab',
 	    	title	: 'Column chart',
 	    	items	: [columnChartPanel()]
    };

    var pieChartTab = {
    		xtype	: 'panel',
 	    	id		: 'pieChartTab',
 	    	title	: 'Pie Chart',
 	    	items	: [pieChartPanel()]
    };
    
    var lineChartTab = {
 	    	xtype	: 'panel',
 	    	id		: 'lineChartTab',
 	    	title	: 'Line chart',
 	    	items 	: [lineChartPanel()]
    };
    
    var chartMainTab = new Ext.TabPanel({
    		xtype	: 'tabpanel',
    		id		: 'chartMainTab',
    		activeTab : 0,
    		height	: 650,
    		items	: [columnChartTab, pieChartTab, lineChartTab]
    });
    
    var mainPanel = new Ext.FormPanel({
        id          : 'mainPanel',
        height		: 600,
        width       : 1350,
        frame       : true,
        layout      : 'vbox',
        items       : [ chartMainTab ]
    });
    
    return mainPanel;
};

function columnChartPanel(){
	
	var data = [['Low',40],['Medium',70],['High',90]];  
    
  	var statusStore = new Ext.data.ArrayStore({  
      fields:['status','data']
     }); 
	  
  	statusStore.loadData(data);
   
  	
  	var columnChart = new Ext.chart.ColumnChart({  
        store	: statusStore,  
        xField	: 'status',  
        yField	: 'data'  
    });  


    var columnpanel = new Ext.Panel({  
   	    title	: 'Column chart',
   	    border	: true,
	    width	: 550,
	    frame	: true,
   	    items	:[columnChart]  
   	});  

    var columnChartPanel = new Ext.Panel({  
	   // renderTo: Ext.getBody(),
	    width	:550,  
	    defaults: {  
    	        height		:350,  
    	        collapsible	: false,  
    	        border		:true,  
    	        titleCollapse: true  
	    },  
	    items	: [columnpanel]  
	});  
    
   
    return columnChartPanel;
};


function lineChartPanel(){
	
	var data = [['Low',40],['Medium',70],['High',90]];  
	    
	  	var statusStore = new Ext.data.ArrayStore({  
	      fields:['status','data']
	     }); 
		  
	  	statusStore.loadData(data);
	   
	  	
	  	var lineChart = new Ext.chart.LineChart({  
	        store	: statusStore,  
	        xField	: 'status',  
	        yField	: 'data'  
	    });  


	    var linePanel = new Ext.Panel({  
	   	    title	: 'Line chart',
	   	    border	: true,
	   	    width	: 550,
	   	    frame	: true,
	   	    items	:[lineChart]  
	   	});  

	    var lineChartPanel = new Ext.Panel({  
		   // renderTo: Ext.getBody(),
		    width	:550, 
		    //frame	: true,
		    defaults: {  
	    	        height		:350,  
	    	        collapsible	: false,  
	    	        border		:true,  
	    	        titleCollapse: true  
		    },  
		    items	: [linePanel]  
		});  
	    
	   
	    return lineChartPanel;
	};
	
	function pieChartPanel(){
		
		var data = [['Low',40],['Medium',70],['High',90]];  
		    
		  	var statusStore = new Ext.data.ArrayStore({  
		      fields:['status','data']
		     }); 
			  
		  	statusStore.loadData(data);
		   
		  	
		  	var pieChart = new Ext.chart.PieChart({  
		        store	: statusStore,  
		        xField	: 'status',  
		        yField	: 'data'  
		    });  


		    var piePanel = new Ext.Panel({  
		   	    title   	: 'Pie chart',  
		   	    border		: true,
		   	    frame		: true,
			    width		: 550,
		   	    dataField   : 'data',
		   	    categoryField: 'status',
		   	    items		:[pieChart]  
		   	});  

		    var columnChartPanel = new Ext.Panel({  
			    //renderTo: Ext.getBody(),
			    width	:550,  
			    defaults: {  
		    	        height		:350,  
		    	        collapsible	: false,  
		    	        border		:true,  
		    	        titleCollapse: true  
			    },  
			    items	: [piePanel]  
			});  
		    
		   
		    return columnChartPanel;
		}